{% extends 'admin.html' %}
{% import 'public.html' as public %}


{% block head_css %}
{{ super() }}
{{ public.DateRangePicker_CSS() }}
{{ public.DataTables_CSS() }}
{{ public.Select2_CSS() }}
{% endblock %}


<!--導航-->
{% block navbar_left %}
<li class="nav-item">
    <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
    <a href="#" class="nav-link text-info" data-toggle="modal" data-target="#AskModal" data-callback="Logout"><i class="fas fa-sign-out-alt"></i> 登出系統</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
    <a href="#" class="nav-link text-warning" data-toggle="modal" data-target="#AskModal" data-callback="Restart"><i class="fas fa-sync-alt"></i> 重啓服務</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
    <a href="#" class="nav-link text-warning" data-toggle="modal" data-target="#AskModal" data-callback="Reboot"><i class="fas fa-redo-alt"></i> 重啓設備</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
    <a href="#" class="nav-link text-danger" data-toggle="modal" data-target="#AskModal" data-callback="Halt"><i class="fas fa-power-off"></i> 關閉系統</a>
</li>
{% endblock %}


<!--右側功能-->
{% block navbar_right %}
<li class="nav-item d-none d-sm-inline-block">
    <h2 class="text-primary" style="margin-top: 5px; margin-right: 20px;" id="Clock"><strong>時間：{[ AppDateTime ]}</strong></h2>
</li>
<!-- Full Screen -->
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button" id="fullscreen_bt" title="全屏幕">
    <i class="fas fa-expand-arrows-alt fa-2x"></i>
</a>
</li>
{% endblock %}


<!--是否打开菜单-->
{% macro check_menu_open(blueprint_name) %}
{% if request.blueprint == blueprint_name %} menu-open {% else %}{% endif %}
{% endmacro %}

<!--是否激活菜单-->
{% macro check_menu_active(blueprint_name) %}
{% if request.blueprint == blueprint_name %} active {% else %}{% endif %}
{% endmacro %}

<!--是否选中菜单-->
{% macro check_link_active(path_name) %}
{% if request.path == path_name %} active {% else %}{% endif %}
{% endmacro %}


<!--功能菜單-->
{% block sidebar_menu %}
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
    <li class="nav-item {{ check_menu_open('charge') }}">
        <a href="#" class="nav-link {{ check_menu_active('charge') }}">
            <i class="nav-icon fas fa-donate"></i><p>收費功能<i class="right fas fa-angle-left"></i></p>
        </a>
        <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="{{ url_for('charge.view') }}" class="nav-link {{ check_link_active(url_for('charge.view')) }}">
                    <i class="fas fa-tachometer-alt nav-icon"></i><p>閘口預覽</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#CashHourlyPayModal">
                    <i class="fas fa-hand-holding-usd nav-icon"></i><p>時租收費</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#CashTicketFixModal">
                    <i class="fas fa-ticket-alt nav-icon"></i><p>失票處理</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#CashMonthlyPayModal">
                    <i class="fas fa-money-check-alt nav-icon"></i><p>月租續費</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('charge.acounts') }}" class="nav-link {{ check_link_active(url_for('charge.acounts')) }}">
                    <i class="fas fa-edit nav-icon"></i><p>轉更結算</p>
                </a>
            </li>
        </ul>
    </li>
    <li class="nav-item {{ check_menu_open('record') }}">
        <a href="#" class="nav-link {{ check_menu_active('record') }}">
            <i class="nav-icon fas fa-exchange-alt"></i><p>車輛記錄<i class="right fas fa-angle-left"></i></p>
        </a>
        <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="{{ url_for('record.parking') }}" class="nav-link {{ check_link_active(url_for('record.parking')) }}">
                    <i class="far fa-circle nav-icon"></i><p>在場車輛</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('record.entrance') }}" class="nav-link {{ check_link_active(url_for('record.entrance')) }}">
                    <i class="far fa-circle nav-icon"></i><p>入場記錄</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('record.exit') }}" class="nav-link {{ check_link_active(url_for('record.exit')) }}">
                    <i class="far fa-circle nav-icon"></i><p>離場記錄</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('record.across') }}" class="nav-link {{ check_link_active(url_for('record.across')) }}">
                    <i class="far fa-circle nav-icon"></i><p>通過記錄</p>
                </a>
            </li>
            {% if curr_user.can(permissions.manager) %}
            <li class="nav-item">
                <a href="{{ url_for('record.recovery') }}" class="nav-link {{ check_link_active(url_for('record.recovery')) }}">
                    <i class="far fa-circle nav-icon"></i><p>恢復記錄</p>
                </a>
            </li>
            {% endif %}
        </ul>
    </li>
    <!-- <li class="nav-item {{ check_menu_open('paid') }}">
        <a href="#" class="nav-link {{ check_menu_active('paid') }}">
            <i class="nav-icon fas fa-list-alt"></i><p>收費記錄<i class="right fas fa-angle-left"></i></p>
        </a>
        <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="{{ url_for('paid.default') }}" class="nav-link {{ check_link_active(url_for('paid.default')) }}">
                    <i class="far fa-circle nav-icon"></i><p>在場車輛</p>
                </a>
            </li>
        </ul>
    </li> -->
    {% if curr_user.can(permissions.manager) %}
    <li class="nav-item {{ check_menu_open('paid') }}">
        <a href="#" class="nav-link {{ check_menu_active('paid') }}">
            <i class="nav-icon fas fa-receipt"></i><p>收費記錄<i class="right fas fa-angle-left"></i></p>
        </a>
        <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="{{ url_for('paid.detail') }}" class="nav-link {{ check_link_active(url_for('paid.detail')) }}">
                    <i class="far fa-circle nav-icon"></i><p>收費明細</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('paid.classes') }}" class="nav-link {{ check_link_active(url_for('paid.classes')) }}">
                    <i class="far fa-circle nav-icon"></i><p>更次明細</p>
                </a>
            </li>
        </ul>
    </li>
    <li class="nav-item {{ check_menu_open('monthly') }}">
        <a href="#" class="nav-link {{ check_menu_active('monthly') }}">
            <i class="nav-icon fas fa-address-book"></i><p>月租管理<i class="right fas fa-angle-left"></i></p>
        </a>
        <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="{{ url_for('monthly.manage') }}" class="nav-link {{ check_link_active(url_for('monthly.manage')) }}">
                    <i class="far fa-circle nav-icon"></i><p>月租用戶</p>
                </a>
            </li>
        </ul>
    </li>
    <li class="nav-item {{ check_menu_open('report') }}">
        <a href="#" class="nav-link {{ check_menu_active('report') }}">
            <i class="nav-icon fas fa-poll"></i><p>車場報表<i class="right fas fa-angle-left"></i></p>
        </a>
        <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="{{ url_for('report.across') }}" class="nav-link {{ check_link_active(url_for('report.across')) }}">
                    <i class="far fa-circle nav-icon"></i><p>出入報表</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('report.paid') }}" class="nav-link {{ check_link_active(url_for('report.paid')) }}">
                    <i class="far fa-circle nav-icon"></i><p>收費報表</p>
                </a>
            </li>
        </ul>
    </li><li class="nav-item {{ check_menu_open('parking') }}">
        <a href="#" class="nav-link {{ check_menu_active('parking') }}">
            <i class="nav-icon fas fa-tools"></i><p>車場管理<i class="right fas fa-angle-left"></i></p>
        </a>
        <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="{{ url_for('parking.setting') }}" class="nav-link {{ check_link_active(url_for('parking.setting')) }}">
                    <i class="far fa-circle nav-icon"></i><p>車場設定</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('parking.places') }}" class="nav-link {{ check_link_active(url_for('parking.places')) }}">
                    <i class="far fa-circle nav-icon"></i><p>車位設定</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('parking.cashers') }}" class="nav-link {{ check_link_active(url_for('parking.cashers')) }}">
                    <i class="far fa-circle nav-icon"></i><p>收費員管理</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('parking.rule') }}" class="nav-link {{ check_link_active(url_for('parking.rule')) }}">
                    <i class="far fa-circle nav-icon"></i><p>收費規則</p>
                </a>
            </li>
        </ul>
    </li>
    {% endif %}
    {% if curr_user.can(permissions.admin) %}
    <li class="nav-item {{ check_menu_open('carpark') }}">
        <a href="#" class="nav-link {{ check_menu_active('carpark') }}">
            <i class="nav-icon fas fa-server"></i><p>系統管理<i class="right fas fa-angle-left"></i></p>
        </a>
        <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="{{ url_for('carpark.setting') }}" class="nav-link {{ check_link_active(url_for('carpark.setting')) }}">
                    <i class="far fa-circle nav-icon"></i><p>系統設定</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('carpark.network') }}" class="nav-link {{ check_link_active(url_for('carpark.network')) }}">
                    <i class="far fa-circle nav-icon"></i><p>網絡設定</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('carpark.users') }}" class="nav-link {{ check_link_active(url_for('carpark.users')) }}">
                    <i class="far fa-circle nav-icon"></i><p>用戶管理</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('carpark.logs') }}" class="nav-link {{ check_link_active(url_for('carpark.logs')) }}">
                    <i class="far fa-circle nav-icon"></i><p>運行日志</p>
                </a>
            </li>
        </ul>
    </li>
    <li class="nav-item {{ check_menu_open('devices') }}">
        <a href="#" class="nav-link {{ check_menu_active('devices') }}">
            <i class="nav-icon fas fa-sitemap"></i><p>設備管理<i class="right fas fa-angle-left"></i></p>
        </a>
        <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="{{ url_for('devices.gate') }}" class="nav-link {{ check_link_active(url_for('devices.gate')) }}">
                    <i class="far fa-circle nav-icon"></i><p>閘機設定</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('devices.camera') }}" class="nav-link {{ check_link_active(url_for('devices.camera')) }}">
                    <i class="far fa-circle nav-icon"></i><p>識別攝像頭</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('devices.led') }}" class="nav-link {{ check_link_active(url_for('devices.led')) }}">
                    <i class="far fa-circle nav-icon"></i><p>LED顯示屏</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('devices.cashier') }}" class="nav-link {{ check_link_active(url_for('devices.cashier')) }}">
                    <i class="far fa-circle nav-icon"></i><p>收費處</p>
                </a>
            </li>
        </ul>
    </li>
    {% endif %}
</ul>
{% endblock %}


<!--彈窗-->
{% block modals %}
{{ super() }}
{{ public.custom_info(custom) }}
<!--系统对话框-->
<div class="modal fade" id="AskModal">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
        <div class="modal-header justify-content-center">
            <h4 class="modal-title" :class="ask.callback=='Logout' ? 'text-info': 'text-danger'"><i class="fas fa-exclamation-triangle"></i> 請注意</h4>
        </div>
        <div class="modal-body text-center">
            <p class="h5">{[ ask.message ]}</p>
        </div>
        <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-success" @click="confirm_event">確認</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        </div>
        </div>
        <!-- /.modal-content -->
    </div>
<!-- /.modal-dialog -->
</div>
<!--用户对话框-->
<div class="modal fade" id="CurrentUserModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="CurrentUserForm">
                <div class="modal-header">
                    <h4 class="modal-title">用戶信息</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div v-for="(val, key) in UserInfo" class="form-group row text-center">
                        <label class="col-sm-3 col-form-label">{[ label_name(key) ]}:</label>
                        <div class="col-sm-8">
                          <input v-model="UserInfo[key]" class="form-control text-center" 
                          :readonly="['LoginName', 'CasherID', 'CashClass'].includes(key)?'readonly':false"
                          :type="key=='Password'?'password':'text'" :name="key" style="font-size: x-large;">
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="submit" class="btn btn-success">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
{% endblock %}

<!--頁面脚本-->
{% block scripts %}
{{ super() }}
{{ public.DateRangePicker_JS()}}
{{ public.DataTables_JS() }}
{{ public.Select2_JS() }}
<script>
    // 消息弹窗
    var AppMessage = Swal.mixin(
        {
        toast: false, 
        position: 'top',
        showConfirmButton: false,
        timer: 2000, 
        allowOutsideClick: false, 
        allowEscapeKey: false
        }
    );

    // 系统时间
    moment.locale();
    var Clock = new Vue({
        el: '#Clock',
        delimiters: ['{[', ']}'],
        data: { AppDateTime: '' },
        methods: {
            updateTime(){this.AppDateTime = moment().format('YYYY-MM-DD HH:mm:ss')}
        },
        mounted: function(){
            setInterval(function(){Clock.updateTime()}, 1000)
        }
    });
    // 加载当前时间
    Clock.updateTime()

    // 用户详情
    var CurrentUser = new Vue({
        el: '#CurrentUserModal',
        delimiters: ['{[', ']}'],
        data: {
            UserInfo: {
                LoginName: '{{ curr_user.LoginName }}', 
                UserName: '{{ curr_user.UserName }}',
                Password: '',
                CasherID: '{{ curr_user.CasherID }}',
                CashClass: '{{ curr_user.CashClass }}',
            }
        },
        methods: {
            // 标题
            label_name(key){
                switch(key){
                    case 'LoginName': return '登錄名'
                    case 'UserName': return '用戶名'
                    case 'Password': return '登入密碼'
                    case 'CasherID': return '收費處'
                    case 'CashClass': return '收費班次'
                }
            },
            // 检查更新结果
            check_update_ret(response){
                if(response.status==200){
                    let ret = response.data
                    AppMessage.fire({icon: ret.icon, text: ret.text})
                    if(ret.icon=='success'){$("#CurrentUserModal").modal('toggle');setTimeout("window.location.reload()", 2200)}
                }else{
                    AppMessage.fire({icon: 'error', text: '更新錯誤，請聯係管理員'})}
            },
            // 提交用户信息
            commit_user_info(){
                axios.post("{{ url_for('interface.user_info') }}", {UpdateUser: this.UserInfo})
                .then(response => this.check_update_ret(response))
                .catch(function (error) {alert(error)})
            }
        },
        mounted: function(){
            // 用户信息校验
            $('#CurrentUserForm').validate({
                rules: {
                    LoginName: {required: true},
                    UserName: {required: true},
                    Password: {minlength: 6},
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.col-sm-8').append(error);
                },
                highlight: function (element, errorClass, validClass) {$(element).addClass('is-invalid')},
                unhighlight: function (element, errorClass, validClass) {$(element).removeClass('is-invalid')},
                // 提交
                submitHandler: function (){
                    CurrentUser.commit_user_info()
                },
            });
        }
    });

    // 系统对话框
    var AskModal = new Vue({
        el: '#AskModal',
        delimiters: ['{[', ']}'],
        data: { ask:{title: '', message: '', callback: ''},},
        methods: {
            // 检查返回结果
            check_commit_ret(response){
                if(response.status==200){
                    let ret = response.data
                    AppMessage.fire({icon: ret.icon, text: ret.text})
                    if(ret.icon=='warning'){$("#AskModal").modal('toggle');setTimeout("window.location.href='{{ url_for('index.default') }}'", 2200)}
                }else{
                    AppMessage.fire({icon: 'error', text: '操作錯誤，請聯係管理員'})}
            },
            // 提交事件
            commit_event(){
                axios.post("{{ url_for('interface.system') }}", {CallBack: this.ask.callback})
                .then(response => this.check_commit_ret(response))
                .catch(function (error) {alert(error)})
            },
            // 事件确认
            confirm_event(){
                if(this.ask.callback=='Logout'){
                    $("#AskModal").modal('toggle')
                    AppMessage.fire({icon: 'warning', text: '正在登出系統...'})
                    setTimeout("window.location.href='{{ url_for('auth.logout') }}'", 2200)
                }else{this.commit_event()}
            },
            // 对话框事件
            button_click(key){
                switch(key){
                    case 'Logout': this.ask.title='登出系統'; this.ask.message='確認登出系統嗎？'; this.ask.callback='Logout';break
                    case 'Restart': this.ask.title='重啓服務'; this.ask.message='確認重啓服務嗎？'; this.ask.callback='Restart';break
                    case 'Reboot': this.ask.title='重啓系統'; this.ask.message='確認重啓系統嗎？'; this.ask.callback='Reboot';break
                    case 'Halt': this.ask.title='關閉系統'; this.ask.message='確認關閉系統嗎？'; this.ask.callback='Halt';break
                }
            }
        }
    });
    // 按键事件
    $("#AskModal").on('show.bs.modal', function (event) {
      let button = $(event.relatedTarget) 
      let callback = button.data('callback')
      AskModal.button_click(callback)
    });

</script>
{% endblock %}





